<template>
	<view>
		<!-- header -->
		<cu-custom bgColor="bg-gradual-red" :isBack="false">
			<!-- <block slot="backText">返回</block>
			<block slot="content">轮播图</block> -->
		</cu-custom>

		<h-search></h-search>
		<h-swiper :list="aBanner"></h-swiper>

		<!-- <h-grid></h-grid> -->

		<!-- 排序筛选操作 及modal框 -->
		<!-- <h-modal></h-modal> -->
		<view>
			<view class="bg-white">
				<view class="flex  p-xs mb-sm modal-view">
					<view class="flex-sub padding-sm margin-xs radius" @tap="showModal" data-target="radio" data-type="activity">{{activityName.name}}</view>
					<view @tap="changeTime" class="flex-sub padding-sm margin-xs radius">
						时间排序
						<text class="lg text-gray" :class="time?'cuIcon-triangleupfill' : 'cuIcon-triangledownfill'"></text>
					</view>
					<view class="flex-sub padding-sm margin-xs radius" @tap="showModal" data-target="radio" data-type="places">{{placesName.name}}</view>
				</view>
			</view>

			<view class="cu-modal" :class="modalName=='radio'?'show':''" @tap="hideModal">
				<view class="cu-dialog" @tap.stop="">
					<radio-group class="block" @change="RadioChange">
						<view class="cu-list menu text-left">
							<view class="cu-item" v-for="(item,index) in aRadio" :key="index">
								<label class="flex justify-between align-center flex-sub">
									<view class="flex-sub">{{item.name}}</view>
									<radio class="round" :class="item.checked ? 'checked' : ''" :checked="item.checked ? true : false" :value="item.value"></radio>
								</label>
							</view>
						</view>
					</radio-group>
				</view>
			</view>
		</view>

		<!-- 列表遍历 -->
		<h-card :a-act="aAct"></h-card>

		<!-- 分享 -->
		<button class="share-btn" open-type="share">
			<!-- <view class="share-img radius bg-img" style="background-image:url(../../static/share.png);">
				<view>根据背景图而改变的阴影</view> 
			</view> -->
			<text class="bg-img lg text-green cuIcon-share"></text>
		</button>
	</view>
</template>

<script>
	const {
		request
	} = require('@/utils/t-request.js');
	import HCard from '@/components/home/h-card.vue';
	import HGrid from '@/components/home/h-grid.vue';
	// import HModal from '@/components/home/h-modal.vue';
	import HSearch from '@/components/home/h-search.vue';
	import HSwiper from '@/components/home/h-swiper.vue';
	export default {
		components: {
			'h-search': HSearch,
			'h-swiper': HSwiper,
			'h-grid': HGrid,
			// 'h-modal': HModal,
			'h-card': HCard
		},
		data() {
			return {
				aaAct: [],
				aBanner: [], //get-banner
				// modal
				modalName: null,
				radioType: '',
				activity: [{
						value: 0,
						name: '全部活动',
						checked: true,
					},
					{
						value: 1,
						name: '举办中',
						checked: false,
					},
					{
						value: 2,
						name: '已举办',
						checked: false,
					},
					{
						value: 3,
						name: '未举办',
						checked: false,
					}
				],
				places: [{
					value: 0,
					name: '双桥村',
					checked: true,
				}, ],
				time: true
			};
		},
		computed: {
			aRadio() {
				return this.radioType ? this[this.radioType] : [];
			},
			activityName() {
				return this.activity.filter(item => item.checked)[0]
			},
			placesName() {
				return this.places.filter(item => item.checked)[0]
			},
			aAct() {
				let type = this.activity.filter(item => item.checked === true)[0].value;
				// console.log(type)
				let arr = [];
				if (type) {
					arr = this.aaAct.filter(item => item.status === type);
				} else {
					arr = this.aaAct;
				}
				arr.sort((a, b) => {
					if (this.time) {
						return b.createTime - a.createTime
					} else {
						return a.createTime - b.createTime
					}
				})
				return arr
			}
		},
		methods: {
			/**
			 * 显示隐藏多选和单选; 并给单选分类
			 * @param {Object} e
			 */
			showModal(e) {
				const {
					target,
					type
				} = e.currentTarget.dataset;
				this.modalName = target;
				this.radioType = type;
			},
			hideModal(e) {
				// 隐藏
				this.modalName = null
				this.radioType = '';
			},
			RadioChange(e) {
				this[this.radioType].forEach((item, index) => {
					if (item.value == e.detail.value) {
						item.checked = true;
					} else {
						item.checked = false;
					}
				})
				this.radioType = '';
				this.hideModal();
				// console.log(this.activityName)	
			},
			changeTime() {
				this.time = !this.time;
			}
		},
		onShow: function() {
			// if (this.aaAct.length) return
			// 优化请求次数
			request({
				url: "/users/get-act",
				method: 'POST'
			}).then(res => {
				this.aaAct = res.data;
			})
		},
		mounted() {
			if (this.aBanner.length) return
			// 优化请求次数
			request({
				url: "/users/get-banner",
			}).then(res => {
				this.aBanner = res.data;
			})
		}
	}
</script>

<style>
	.card-height {
		height: 200rpx;
	}

	.share-btn {
		position: fixed;
		right: 20rpx;
		bottom: 50rpx;
		width: 80rpx;
		height: 80rpx;
		padding: 0;
		border-radius: 50%;
		background-color: rgba(0, 0, 0, 0.6);
		font-size: 32rpx;
	}

	.share-img {
		font-size: 32rpx !important;
	}
</style>
